<template>
	<my-cell title="">
		<PayBoxItem
			:data="data"
			:row="{
				label: '总收款',
				priceKey: 'TotalSkdAmt',
				numberKey: 'TotalSkdCnt',
				background: '#e2e9ff',
				icon: 'icon-money-finance-seller-fill',
				iconBackground: '#4944b8'
			}"
		></PayBoxItem>
	</my-cell>
	<my-cell title="线上收款">
		<my-list
			:options="[
				{
					label: '线上微信',
					priceKey: 'TotalWxSkdAmt',
					numberKey: 'TotalWxSkdCnt',
					background: '#e4ffec',
					icon: 'icon-weixin',
					iconBackground: '#58b878'
				},
				{
					label: '线上支付宝',
					priceKey: 'TotalAliSkdAmt',
					numberKey: 'TotalAliSkdCnt',
					background: '#ddf2ff',
					icon: 'icon-zhifubao',
					iconBackground: '#00a9e9'
				}
			]"
		>
			<template #item="{ row }">
				<PayBoxItem :data="data" :row="row"></PayBoxItem>
			</template>
		</my-list>
	</my-cell>
	<my-cell title="线下收款">
		<PayBoxItem
			:data="data"
			:row="{
				label: '线下收款',
				priceKey: 'TotalOffLSkdAmt',
				numberKey: 'TotalOffLSkdCnt',
				background: '#fff5de',
				icon: 'icon-qianbao',
				iconBackground: '#f7ae0d'
			}"
		></PayBoxItem>
		<view class="m-t-16">
			<my-list class="m-t-16" :options="data.offlineItems" background="#f4f7fd" :padding="16">
				<template #item="{ row }">
					<view class="fwb f-32">{{ `${row.BankName}` }}</view>
					<view class="f-28 m-t-8">
						<view>{{ `账号：${row.BankCode}` }}</view>
						<view class="flex-start-center m-t-8">
							<view class="flexAuto">{{ `金额：${row.PayAmt}` }}</view>
							<view class="flexAuto">{{ `单数：${row.Cnt}` }}</view>
						</view>
					</view>
				</template>
			</my-list>
		</view>
	</my-cell>
</template>

<script lang="uts" setup>
import PayBoxItem from './PayBoxItem.vue'
interface Props {
	data ?: any,//数据
}
const props = withDefaults(defineProps<Props>(), {

})

//搜索
</script>

<style scoped lang="scss">
.payBox {
	display: flex;
	padding: 16rpx;
	border-radius: 8rpx;
	.iconfont {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #999;
		border-radius: 8rpx;
		overflow: hidden;
		margin-right: 32rpx;
		color: #fff;
		box-shadow: 0 4rpx 6rpx 0 rgba(0, 0, 0, 0.1);
	}
	.payBox-item {
		flex: 1;
		overflow: hidden;
		.payBox-title {
			color: rgba(0, 0, 0, 0.6);
		}
		.payBox-main {
			margin-top: 8rpx;
		}
	}
}
</style>
